body {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  font-size: 12px;
  color: black;
  height: 100vh;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default;
}
.fieldLabel {
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
}
.panelButtons {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  text-align: center;
}
.button {
  margin: 2px;
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
  display: inline-block;
  box-sizing: border-box;
  border: solid 1px #808080;
  cursor: pointer;
  background-color: #617e81;
  background: linear-gradient(#94bbbf, #617e81);
  border-radius: 3px;
  font-weight: bold;
  color: white;
  text-shadow: black 1px 1px 2px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.button:hover {
  background-color: #d9aeae;
  background: linear-gradient(#7facb1, #3c5658);
}
.disabledButton {
  margin: 2px;
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
  display: inline-block;
  box-sizing: border-box;
  border: solid 1px #808080;
  cursor: not-allowed;
  background-color: #617e81;
  background: linear-gradient(#c8dcde, #b9d5d8);
  border-radius: 3px;
  font-weight: bold;
  color: #c5e0e4;
  text-shadow: black 1px 1px 2px;
  text-decoration: none;
}
.selectedButton {
  background-color: #80FF80 !important;
  background: linear-gradient(#80FF80, #2e752e);
}
.selectedButton:hover {
  background-color: #80FF80 !important;
  background: linear-gradient(#63c363, #153415);
}
.panelButtons > span {
  margin: 2px;
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
  display: inline-block;
  box-sizing: border-box;
  border: solid 1px #808080;
  cursor: pointer;
  background-color: #617e81;
  background: linear-gradient(#94bbbf, #617e81);
  border-radius: 3px;
  font-weight: bold;
  color: white;
  text-shadow: black 1px 1px 2px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.panelButtons > span:hover {
  background-color: #d9aeae;
  background: linear-gradient(#7facb1, #3c5658);
}
.engineInput {
  border: solid 1px #c0c0c0;
  box-sizing: border-box;
  padding: 2px;
}
.engineInput:focus {
  outline: none;
}
select {
  border: solid 1px #c0c0c0;
  box-sizing: border-box;
  padding: 2px;
  padding: 4px;
  border-radius: 4px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
}
select:focus {
  outline: none;
}
input,
textarea {
  border: solid 1px #c0c0c0;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 4px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  padding: 5px;
}
input:focus,
textarea:focus {
  outline: none;
}
h1 {
  margin: 0px;
  text-align: center;
}
#confirmDialog {
  width: 300px;
  position: absolute;
  left: calc(50% - 150px);
  border: solid 2px #c0c0c0;
  box-shadow: 2px 2px 3pc #A0A0A0;
  padding: 5px;
  box-sizing: border-box;
  top: calc(50vh - 50px);
  background-color: #FFFFFF;
  display: none;
  z-index: 100000;
}
#confirmLabel {
  font-weight: bold;
}
#confirmButtons {
  margin-top: 5px;
  text-align: center;
}
#displayMessage {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: none;
  font-size: 20px;
}
.displayMessageVisible {
  opacity: 1;
  animation-name: displayIn;
  animation-duration: 0.5s;
}
.displayMessageHidden {
  opacity: 0;
  animation-name: displayOut;
  animation-duration: 0.5s;
}
#loginBackground {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 200001;
}
#loginForm {
  position: absolute;
  width: 400px;
  height: 135px;
  left: calc(50% - 200px);
  top: calc(50% - 50px);
  z-index: 200002;
}
#loginForm table {
  width: 100%;
}
#loginForm table tr > td:nth-child(1) {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
}
#loginForm input {
  width: 100%;
}
#loginForm h3 {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
#promptField {
  width: 100%;
}
#backgroundConfirm {
  background-color: transparent;
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: none;
  z-index: 5000;
}
.CodeMirror {
  height: auto;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.line-error {
  background-color: rgba(255, 0, 0, 0.2) !important;
  font-weight: bold;
}
#errorWindow {
  position: absolute;
  background-color: #d9aeae;
  color: black;
  border: solid 2px #FF0000;
  width: 400px;
  height: 300px;
  bottom: 0px;
  right: 0px;
  z-index: 200000;
  display: none;
}
#errorWindow > div:nth-child(1) {
  text-align: center;
  font-weight: bold;
  background-color: #FF0000;
  padding: 2px;
}
#errorWindow > div:nth-child(2) {
  padding: 3px;
  overflow-y: scroll;
  height: 255px;
  width: 100%;
  box-sizing: border-box;
}
#errorWindow > div:nth-child(3) {
  text-align: center;
}
#branding {
  position: absolute;
  left: 5px;
  bottom: 5px;
  z-index: 200001;
  text-align: center;
}
#branding img {
  display: block;
  margin-left: 20px;
  width: 85px;
  height: 67px;
}
#branding a {
  text-decoration: none;
  color: black;
  text-shadow: 0px 0px 2px white;
  font-weight: bold;
  font-size: 16px;
}
#gameNewsDisplay {
  position: absolute;
  right: 5px;
  top: 5px;
  bottom: 5px;
  width: 280px;
  z-index: 200001;
}
#helpLink {
  position: fixed;
  bottom: -28px;
  right: -28px;
  background-color: #0000F0;
  color: white;
  font-weight: bold;
  display: block;
  font-size: 26px;
  text-decoration: none;
  height: 60px;
  width: 60px;
  border-radius: 30px;
  padding-left: 12px;
  padding-top: 3px;
  box-sizing: border-box;
  border: solid 3px #7979ae;
}
#helpLink:hover {
  background-color: #6200f0;
}
.infoPanel {
  border: solid 2px black;
  background-color: #ffe28e;
  font-size: 14px;
  padding: 5px;
  text-align: justify;
}
.noselect {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
@-moz-keyframes displayIn {
  from {
    opacity: 0;
    bottom: -20px;
  }
  to {
    opacity: 1;
    bottom: 5px;
  }
}
@-webkit-keyframes displayIn {
  from {
    opacity: 0;
    bottom: -20px;
  }
  to {
    opacity: 1;
    bottom: 5px;
  }
}
@keyframes displayIn {
  from {
    opacity: 0;
    bottom: -20px;
  }
  to {
    opacity: 1;
    bottom: 5px;
  }
}
@-moz-keyframes displayOut {
  from {
    opacity: 1;
    bottom: 5px;
  }
  to {
    opacity: 0;
    bottom: -20px;
  }
}
@-webkit-keyframes displayOut {
  from {
    opacity: 1;
    bottom: 5px;
  }
  to {
    opacity: 0;
    bottom: -20px;
  }
}
@keyframes displayOut {
  from {
    opacity: 1;
    bottom: 5px;
  }
  to {
    opacity: 0;
    bottom: -20px;
  }
}
@font-face {
  font-family: 'FontAwesome';
  src: url('/Fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('/Fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('/Fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('/Fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('/Fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.triangleUp {
  content: "\f0d8";
  font: normal normal normal 14px/1 FontAwesome;
}
.triangleDown {
  content: "\f0d7";
  font: normal normal normal 14px/1 FontAwesome;
}
.arrowRight {
  content: "\f105";
  font: normal normal normal 14px/1 FontAwesome;
}
.userIcon {
  content: "\f007";
  font: normal normal normal 14px/1 FontAwesome;
}
.pencilIcon {
  content: "\f040";
  font: normal normal normal 14px/1 FontAwesome;
}
.saveIcon {
  content: "\f0c7";
  font: normal normal normal 14px/1 FontAwesome;
}
.removeIcon {
  content: "\f00d";
  font: normal normal normal 14px/1 FontAwesome;
}
.calendarIcon {
  content: "\f073";
  font: normal normal normal 14px/1 FontAwesome;
}
.trashcanIcon {
  content: "\f014";
  font: normal normal normal 14px/1 FontAwesome;
}
.doubleLeftIcon {
  content: "\f100";
  font: normal normal normal 14px/1 FontAwesome;
}
.doubleRightIcon {
  content: "\f101";
  font: normal normal normal 14px/1 FontAwesome;
}
.toggleOnIcon {
  content: "\f205";
  font: normal normal normal 14px/1 FontAwesome;
}
.toggleOffIcon {
  content: "\f204";
  font: normal normal normal 14px/1 FontAwesome;
}
.tagIcon {
  content: "\f02b";
  font: normal normal normal 14px/1 FontAwesome;
}
.copyIcon {
  content: "\f0c5";
  font: normal normal normal 14px/1 FontAwesome;
}
.upArrowIcon {
  content: "\f176";
  font: normal normal normal 14px/1 FontAwesome;
}
.globeIcon {
  content: "\f0ac";
  font: normal normal normal 14px/1 FontAwesome;
}
.pointOfInterestIcon {
  content: "\f0d2";
  font: normal normal normal 14px/1 FontAwesome;
}
.streetViewIcon {
  content: "\f21d";
  font: normal normal normal 14px/1 FontAwesome;
}
.searchIcon {
  content: "\f002";
  font: normal normal normal 14px/1 FontAwesome;
}
.gridIcon {
  content: "\f00a";
  font: normal normal normal 14px/1 FontAwesome;
}
.minimapIcon {
  content: "\f0ac";
  font: normal normal normal 14px/1 FontAwesome;
}
#chatContainer {
  position: absolute;
  right: 0px;
  height: calc(50% - 20px);
  display: none;
  z-index: 1000;
  top: 27px;
}
#chatContainer .gamePanelContent {
  overflow-y: hidden;
}
#chatTitle {
  cursor: pointer;
}
#chatUserList {
  overflow-y: scroll;
  height: calc(100% - 44px);
  box-sizing: border-box;
  display: inline-block;
  float: left;
  width: 120px;
}
#chatScroll {
  overflow-y: scroll;
  padding: 3px;
  height: calc(100% - 44px);
  width: calc(100% - 120px);
  box-sizing: border-box;
  display: inline-block;
}
#chatScroll > div {
  color: white;
  border-bottom: dashed 1px #7a7ead;
}
#chatScroll > div > div:first-child {
  width: 60px;
  overflow: hidden;
  float: left;
  cursor: pointer;
}
#chatScroll > div > div:nth-child(2) {
  width: calc(100% - 75px);
  margin-left: 60px;
}
#chatScroll .chatSystemMessage {
  color: #00E000;
}
.fullChatScroll {
  height: calc(100% - 22px) !important;
}
#chatLine {
  width: 100%;
  background-color: transparent;
  outline: none;
  border: solid 1px black;
  color: white;
}
#chatCollapsed {
  width: 40px;
  height: 150px;
  position: absolute;
  right: -10px;
  bottom: 150px;
  cursor: pointer;
  display: none;
  z-index: 1000;
}
#chatCollapsed .gamePanelContentNoHeader > div {
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  height: 20px;
  width: 130px;
  position: absolute;
  right: -45px;
  bottom: 65px;
  text-align: center;
  font-weight: bold;
}
#chatChannels span {
  font-weight: bold;
}
#chatChannels div {
  display: inline-block;
  padding: 2px;
  margin-left: 3px;
  cursor: pointer;
}
.channelNewMessage {
  font-weight: bold;
}
.channelNewMessage:after {
  content: "*";
}
#chatEntry {
  position: absolute;
  right: 5px;
  display: none;
}
#chatEntry input {
  width: 100%;
  border-radius: 0px;
}
@media (min-width: 800px) {
  /*#chatEntry
    {
        bottom: 5px;
    }*/
  #chatContainer {
    top: auto;
    bottom: 40px;
  }
  /*    .openPanelIcon
    {
        left: ~"calc(50% - 17px) !important";
    }*/
}
.codeGraphArea {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 16px;
  right: 200px;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
  overflow: scroll;
  box-sizing: border-box;
  padding: 5px;
}
.codeGraphTextContainer {
  position: absolute;
  top: 20px;
  right: 0px;
  left: 0px;
  bottom: 17px;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
}
.codeGraphTabs {
  position: absolute;
  bottom: 0px;
  left: 5px;
}
.codeGraphTabs span {
  background-color: #202020;
  color: white;
  font-weight: bold;
  padding: 3px;
  margin-right: 2px;
  line-height: 12px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  cursor: pointer;
}
.codeGraphSearchNodes {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 197px !important;
  box-sizing: border-box;
}
.codeGraphSelector {
  position: absolute;
  top: 30px;
  bottom: 216px;
  right: 0px;
  width: 197px;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
  white-space: nowrap;
}
.codeGraphNodeHelp {
  position: absolute;
  bottom: 16px;
  height: 195px;
  right: 0px;
  width: 197px;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 3px;
  font-size: 14px;
  overflow: hidden;
}
.codeGraphNodeHelp .codeExample {
  display: block;
  background-color: #E0E0E0;
  border: solid 1px #808080;
  margin: 2px;
  padding: 3px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 5px;
}
.codeGroup {
  padding-left: 10px;
  margin-bottom: 10px;
}
.codeGroup > span {
  background-color: #202020;
  font-weight: bold;
  color: white;
  display: block;
  margin-left: -10px;
  padding: 3px;
  margin-bottom: 5px;
  font-size: 16px;
}
.codeGroup > p {
  margin-bottom: 3px;
  color: black;
  border-bottom: 1px dashed #316bc7;
  cursor: pointer;
  padding: 2px;
  display: block;
  margin-top: 0px;
}
.codeGroup > p:hover {
  background-color: #ffd7d7;
  color: black;
}
.codeBlock {
  border-left: 4px solid #316bc7;
  margin: 2px;
  font-family: sans-serif;
  border-radius: 5px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  margin-top: 5px;
  margin-bottom: 3px;
  cursor: pointer;
  width: 200px;
  box-shadow: #000080 -2px 2px 2px;
}
.codeBlockSeparator {
  height: 10px;
}
.overBlock {
  border-left: 4px solid #31c7ab !important;
  box-shadow: #196c5d -2px 2px 2px !important;
}
.blockOnError {
  border-left: 4px solid #ff9400;
  box-shadow: #794600 -2px 2px 2px;
}
.emptyBlock {
  background-color: #d5d8dd;
  margin: 2px;
  font-family: sans-serif;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-top: 5px;
  margin-bottom: 3px;
  display: block;
  height: 30px;
  width: 200px;
  color: #7e7e7e;
  box-shadow: #808080 -2px 2px 2px;
  line-height: 30px;
  text-align: center;
}
.emptyBlock:hover {
  background-color: #90ceb1;
}
.simpleBlockType {
  display: block;
  font-weight: bold;
  background-color: #316bc7;
  color: white;
  margin-top: -2px;
  margin-left: -2px;
  margin-right: -2px;
  padding: 3px;
  width: 200px;
  box-sizing: border-box;
}
.blockType {
  display: block;
  font-weight: bold;
  background-color: #316bc7;
  color: white;
  margin-top: -2px;
  margin-left: -2px;
  margin-right: -2px;
  padding: 3px;
  width: 200px;
  box-sizing: border-box;
}
.blockType:before {
  content: "\f0d7";
  font: normal normal normal 14px/1 FontAwesome;
  margin-right: 10px;
}
.blockOnError > .blockType {
  background-color: #ff9400;
}
.collapsedBlock > .blockType:before {
  content: "\f0d8";
  font: normal normal normal 14px/1 FontAwesome;
}
.collapsedBlock > div {
  display: none;
}
.overBlock > .blockType,
.overBlock > .simpleBlockType {
  background-color: #31c7ab !important;
}
.overBlock > div > .blockLabel {
  background-color: #31c7ab !important;
}
.overBlock > .endBlock {
  background-color: #31c7ab !important;
}
.blockLabel {
  display: block;
  box-sizing: border-box;
  background-color: #316bc7;
  color: white;
  width: 198px;
}
.blockOnError > div > .blockLabel {
  background-color: #ff9400;
}
.endBlock {
  display: block;
  box-sizing: border-box;
  background-color: #316bc7;
  width: 198px;
  height: 10px;
}
.blockOnError > .endBlock {
  background-color: #ff9400;
}
.subBlock {
  display: block;
  margin-top: 6px;
  margin-left: 5px;
}
.blockValue {
  width: 198px;
  display: block;
  box-sizing: border-box;
  background-color: #316bc7;
}
.blockValue input {
  width: 100%;
  box-sizing: border-box;
}
.codeHelp {
  position: fixed;
  top: 5px;
  left: 220px;
  z-index: 10;
  height: 100px;
  width: 300px;
  border: solid 1px black;
  background-color: white;
  padding: 3px;
  display: none;
  overflow-x: hidden;
  overflow-y: scroll;
}
.codeHelp .codeExample {
  display: block;
  white-space: pre;
  font-family: 'Courier New';
  background-color: #E0E0E0;
  border: solid 1px #808080;
  margin: 2px;
  padding: 3px;
  width: 100%;
  box-sizing: border-box;
}
.codeHelp .selectedInsertion {
  background-color: #FFE000;
}
#codeGraphEditorHelp {
  position: fixed;
  left: calc(50% - 200px);
  top: calc(50% - 100px);
  width: 400px;
  height: 200px;
  z-index: 100000000000000000;
  border: solid 2px black;
  background-color: #ffe28e;
  font-size: 14px;
  padding: 5px;
  text-align: justify;
}
.codeGraphActiveTab {
  color: #ffbb00 !important;
}
.blockArrayEntry {
  width: calc(100% - 30px) !important;
}
.blockDeleteArrayEntry {
  background-color: #E00000;
  color: white;
  width: 15px;
  height: 15px;
  border-radius: 7px;
  box-sizing: border-box;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  line-height: 15px;
  margin-left: 5px;
  text-align: center;
}
.blockDeleteArrayEntry:hover {
  background-color: #980000;
}
.blockAddArrayEntry {
  width: calc(100% - 4px);
  box-sizing: border-box;
}
.inventoryList {
  width: 100%;
}
.inventoryList thead > tr > td {
  font-weight: bold;
}
.inventoryList tr > td:nth-child(1) {
  width: 1%;
  white-space: nowrap;
}
.inventoryList tr > td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}
.inventoryListtr > td:nth-child(4) {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
#hideMenu {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: transparent;
  z-index: 100000;
  display: none;
}
.shortcut {
  float: right;
  display: block !important;
  visibility: visible !important;
  font-size: 9px;
}
#menubar {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 32px;
  background-color: #343434;
  padding-left: 20px;
  padding-top: 3px;
  border-bottom: solid 2px #A0A0A0;
  box-sizing: border-box;
  z-index: 100001;
  line-height: 32px;
  vertical-align: top;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#menubar > div,
#menubar > a {
  margin-left: 28px;
  color: #E0E0E0;
  font-size: 16px;
  display: inline-block;
  font-weight: bold;
  line-height: 20px;
  cursor: pointer;
  width: 80px;
  padding-left: 10px;
  padding-right: 5px;
  border-right: solid 1px #717171;
  text-decoration: none;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#menubar > :last-child {
  border-right: none;
}
#menubar > div:hover,
#menubar > a:hover {
  color: #ffbb00;
}
#menubar > div:hover:after,
#menubar > a:hover:after {
  content: "";
  display: block;
  background-color: #d42525;
  height: 3px;
  width: 95px;
  position: fixed;
  margin-top: 2px;
  margin-left: -10px;
}
#menubar > div > div {
  color: #E0E0E0;
  display: none;
  position: fixed;
  min-width: 95px;
  background-color: #343434;
  margin-left: -41px;
  padding-left: 27px;
  font-size: 12px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;
}
#menubar > div > div a {
  color: #E0E0E0;
  text-decoration: none;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#menubar > div > div div:hover {
  color: #ffbb00;
}
#menubar > div > div a:hover {
  color: #ffbb00;
}
#menubar > div > div > div:after {
  content: "\f105";
  font: normal normal normal 14px/1 FontAwesome;
  float: right;
  padding-right: 5px;
  padding-left: 5px;
}
#menubar > div > div > div > div {
  display: none;
  margin-left: 100px !important;
  margin-top: -20px !important;
  position: fixed;
  min-width: 95px;
  background-color: #343434;
  margin-left: -15px;
  font-size: 12px;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
}
.menuIcon {
  content: " ";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -32px;
  margin-top: -4px;
  background-image: url('/images/interface_icons.png');
}
#menu_Game:before {
  content: " ";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -32px;
  margin-top: -4px;
  background-image: url('/images/interface_icons.png');
  background-position-x: 0px;
}
#menu_Art:before {
  content: " ";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -32px;
  margin-top: -4px;
  background-image: url('/images/interface_icons.png');
  background-position-x: -24px;
}
#game_Editors:before {
  content: " ";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -32px;
  margin-top: -4px;
  background-image: url('/images/interface_icons.png');
  background-position-x: -48px;
}
#game_Admin:before {
  content: " ";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -32px;
  margin-top: -4px;
  background-image: url('/images/interface_icons.png');
  background-position-x: -120px;
}
#game_Help:before {
  content: " ";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -32px;
  margin-top: -4px;
  background-image: url('/images/interface_icons.png');
  background-position-x: -72px;
}
#game_Search {
  top: 7px;
  right: 5px;
  cursor: pointer;
  content: " ";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -32px;
  margin-top: -4px;
  background-image: url('/images/interface_icons.png');
  background-position-x: -144px;
}
#game_Search:hover {
  opacity: 0.5;
}
@media print {
  #menubar {
    display: none;
  }
}
.listSelector input {
  width: 100%;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.listSelector div {
  border: solid 1px #c0c0c0;
  position: absolute;
  top: 30px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: scroll;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.listSelector table {
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
}
.listSelector table tr {
  cursor: pointer;
}
.listSelectorSelectedRow {
  background-color: #ffd800 !important;
}
#messageIcon div.gamePanelContentNoHeader > div {
  background-color: #ffd800;
  font-weight: bold;
  color: black;
  font-size: 16px;
  position: absolute;
  top: 10px;
  left: 40px;
  height: 30px;
  width: 30px;
  border-radius: 15px;
  line-height: 30px;
  text-align: center;
  border: solid 2px black;
}
.messageHeader {
  width: 100%;
  border-collapse: collapse;
}
.messageHeader tr > td:nth-child(1) {
  width: 120px;
}
.messageHeader tr > td:nth-child(2) {
  width: 140px;
}
.messageHeader tr > td:nth-child(3) {
  width: calc(100% - 260px);
}
#messageList {
  height: 150px;
  overflow-y: scroll;
}
#messageList table {
  width: 100%;
  border-collapse: collapse;
}
#messageList table tr {
  cursor: pointer;
}
#messageList table tr > td:nth-child(1) {
  width: 120px;
}
#messageList table tr > td:nth-child(2) {
  width: 140px;
}
#messageList table tr > td:nth-child(3) {
  width: calc(100% - 260px);
}
.newMessage td {
  font-weight: bold;
}
.newMessage td:nth-child(1):before {
  content: "*";
}
#messageDetails {
  margin-top: 5px;
  height: calc(100vh - 330px);;
  overflow-y: scroll;
}
#messageDetails table {
  width: 100%;
}
#messageDetails table tr {
  vertical-align: top;
}
#messageDetails table tr > td:first-child {
  width: 1px;
  font-weight: bold;
  white-space: nowrap;
}
#messageDetails input,
#messageDetails select {
  width: 100%;
}
#messageDetails textarea {
  width: 100%;
  resize: none;
  height: 180px;
}
#messageDetails table tr > td:nth-child(3) {
  width: 40px;
  white-space: nowrap;
}
#messageDetails table tr > td {
  vertical-align: baseline;
}
.removeAttachement {
  margin-right: 10px;
  display: inline-block;
  background-color: #E00000;
  color: white;
  width: 15px;
  height: 15px;
  border-radius: 7px;
  padding-left: 3px;
  box-sizing: border-box;
  padding-top: 1px;
  font-weight: bold;
  cursor: pointer;
}
#gameMenuPanel {
  position: absolute;
  left: -10px;
  top: 50px;
  bottom: 60px;
  right: 64px;
  display: none;
  width: 500px;
  max-width: calc(100% - 64px);
}
#gameMenuPanel #gameMenuPanelContent {
  margin-left: 10px;
}
.openPanelIcon {
  left: calc(100% - 84px) !important;
}
.profileList {
  width: 100%;
}
.profileList thead td {
  font-weight: bold;
}
.profileList tr > td:nth-child(2),
.profileList tr > td:nth-child(3) {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.profileList tr > td:nth-child(4) {
  width: 1%;
  white-space: nowrap;
}
#profileIcon div.gamePanelContentNoHeader > div {
  background-color: #ffd800;
  font-weight: bold;
  color: black;
  font-size: 32px;
  position: absolute;
  top: 30px;
  left: 45px;
  height: 30px;
  width: 30px;
  border-radius: 15px;
  line-height: 30px;
  text-align: center;
  border: solid 2px black;
}
@media (min-width: 564px) {
  .openPanelIcon {
    left: 480px !important;
  }
}
#searchPanel {
  position: absolute;
  top: 30px;
  right: 0px;
  width: 300px;
  bottom: 30px;
  z-index: 100002;
  background-color: #343434;
  padding: 3px;
  border-left: solid 3px #A0A0A0;
  border-bottom: solid 3px #A0A0A0;
  display: none;
}
#searchPanel > div:first-child {
  color: #E0E0E0;
  font-size: 14px;
  font-weight: bold;
}
#generalSearch {
  position: absolute;
  top: 22px;
  left: 3px;
  right: 3px;
  width: calc(100% - 6px);
}
#generalSearchResult {
  position: absolute;
  top: 53px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  overflow-y: auto;
}
#generalSearchResult span {
  font-weight: bold;
  font-size: 14px;
  color: #E0E0E0;
  display: block;
}
#generalSearchResult div {
  margin-left: 10px;
  font-weight: bold;
  color: #E0E0E0;
  cursor: pointer;
  margin-bottom: 10px;
}
#generalSearchResult a {
  display: block;
  color: #E0E0E0;
  text-decoration: none;
}
#generalSearchResult a:hover {
  text-decoration: underline;
}
#characterPreviewPanel {
  position: absolute;
  right: 30px;
  top: 35px;
  width: 180px;
  height: 185px;
  text-align: center;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
}
#newArtCharcterDialog {
  position: absolute;
  top: 34px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: white;
  display: none;
}
#newArtCharcterDialog table {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
#newArtCharcterDialog table tr > td:first-child {
  font-weight: bold;
  width: 1%;
  white-space: nowrap;
}
#newArtCharcterDialog input,
#newArtCharcterDialog select {
  width: 100%;
}
.imageList {
  position: absolute;
  left: 5px;
  top: 35px;
  width: 200px;
  bottom: 30px;
}
.imageActions {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 200px;
  text-align: center;
}
.imageParameters {
  position: absolute;
  top: 35px;
  right: 30px;
  left: 207px;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
  overflow-y: scroll;
  height: 185px;
}
.imageParameters table {
  width: 100%;
}
.imageParameters table tr > td:first-child,
.imageParameters table tr > td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
}
.imageParameters input,
.imageParameters select {
  width: 100%;
}
.imageDisplayContainer {
  position: absolute;
  top: calc(227px);
  right: 30px;
  bottom: 30px;
  left: 207px;
  border: solid 1px #c0c0c0;
  overflow: scroll;
  border-radius: 4px;
}
#artObjectEditorMouseOverlay {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
  background-color: transparent;
  display: none;
  cursor: pointer;
}
#uploadArtObject {
  position: absolute;
  left: 0px;
  top: 35px;
  right: 0px;
  bottom: 0px;
  background-color: #FFFFFF;
  display: none;
  z-index: 1000;
}
#artObjectIframe {
  display: none;
}
.imageCommands {
  position: absolute;
  left: 202px;
  right: 0px;
  bottom: 5px;
  text-align: center;
}
#detectingWindow {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-color: #FFFFFF;
  display: none;
}
#detectingWindow > div {
  font-weight: bold;
  font-size: 20px;
  margin-top: 100px;
  width: 100%;
  text-align: center;
}
#panelStyle {
  float: left;
  margin-right: 5px;
}
#panelDetails {
  position: absolute;
  top: 35px;
  left: 5px;
  right: 30px;
  bottom: 30%;
  overflow-y: scroll;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
}
#panelDetails table {
  width: 100%;
}
#panelDetails tr {
  vertical-align: top;
}
#panelDetails tr > td:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
}
#panelDetails input {
  width: 100%;
}
#panelDetails select {
  width: 100%;
}
#testPanel {
  position: absolute;
  top: calc(70% + 5px);
  left: 10px;
  right: 30px;
  bottom: 5px;
  overflow: hidden;
}
#soundList {
  position: absolute;
  top: 33px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  overflow-y: scroll;
  background-color: white;
  display: none;
  padding: 5px;
}
.musicPreview {
  border: solid 1px #c0c0c0;
  margin: 3px;
  padding: 5px;
  width: 300px;
  display: inline-block;
}
#tilesPropertiesTitle {
  position: absolute;
  left: 0px;
  width: 250px;
  top: 35px;
  font-weight: bold;
}
#mainType {
  width: 100%;
}
#tilesProperties {
  position: absolute;
  left: 0px;
  width: 250px;
  bottom: calc(80% + 3px);
  top: 50px;
  border: solid 1px #c0c0c0;
  overflow-y: scroll;
  box-sizing: border-box;
  border-radius: 4px;
}
#tilesProperties table {
  width: calc(100% - 3px);
}
#tilesProperties table tr > td:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
}
#tilesProperties input,
#tilesProperties .button {
  width: 100%;
}
#tileProposeType {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 35px;
  bottom: 0px;
  background-color: #FFFFFF;
  overflow-y: scroll;
  display: none;
}
#listTypeTitle {
  position: absolute;
  left: 0px;
  width: 250px;
  top: 20%;
  font-weight: bold;
}
#listTypes {
  position: absolute;
  left: 0px;
  width: 250px;
  top: calc(20% + 20px);
  bottom: calc(60% + 20px);
}
#typesCommands {
  position: absolute;
  left: 0px;
  width: 250px;
  bottom: calc(60% - 10px);
  text-align: center;
}
#tileTransitionsTitle {
  position: absolute;
  left: 0px;
  width: 250px;
  top: calc(40% + 10px);
  font-weight: bold;
}
#listTransitions {
  position: absolute;
  left: 0px;
  width: 250px;
  top: calc(40% + 30px);
  bottom: calc(40% + 20px);
}
#transitionsCommands {
  position: absolute;
  left: 0px;
  width: 250px;
  bottom: calc(40% - 10px);
  text-align: center;
}
#tilePathTitle {
  position: absolute;
  left: 0px;
  width: 250px;
  top: calc(60% + 10px);
  font-weight: bold;
}
#listPaths {
  position: absolute;
  left: 0px;
  width: 250px;
  top: calc(60% + 30px);
  bottom: calc(20% + 20px);
}
#pathsCommands {
  position: absolute;
  left: 0px;
  width: 250px;
  bottom: calc(20% - 10px);
  text-align: center;
}
#tileWalkable,
#tileInType,
#tileTransition,
#tilePath {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 35px;
  bottom: 0px;
  background-color: #FFFFFF;
  display: none;
}
.tilePanelButtons {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
}
#listTileWalkable {
  overflow-y: scroll;
  position: absolute;
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 30px;
  border: solid 1px #c0c0c0;
}
#listTileWalkable > div {
  border: solid 3px #00E000;
  display: inline-block;
  cursor: pointer;
}
.nonWalkable {
  border: solid 3px #E00000 !important;
}
#tileInTypeProperties {
  width: calc(100% - 30px);
}
#tileInTypeProperties tr > td:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
}
#tileInTypeProperties input {
  width: 100%;
}
#listTileInType {
  overflow-y: scroll;
  position: absolute;
  left: 5px;
  top: 35px;
  right: 30px;
  bottom: 30px;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
}
#listTileInType > div {
  border: solid 3px transparent;
  display: inline-block;
  cursor: pointer;
}
.tileInTypeSelected {
  border: solid 3px #00E000 !important;
}
#tileEditorLoading {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  top: 35px;
  background-color: #FFFFFF;
  padding: 10px;
  font-size: 20px;
}
#listPossibleTransitionTiles {
  position: absolute;
  left: 0px;
  right: 30px;
  top: 170px;
  bottom: 30px;
  border: solid 1px #c0c0c0;
  overflow-y: scroll;
  border-radius: 4px;
}
#listPossibleTransitionTiles div {
  cursor: pointer;
  display: inline-block;
  margin: 2px;
}
#tileTransitionProperties {
  width: calc(100% - 30px);
}
#tileTransitionProperties input,
#tileTransitionProperties select {
  width: 100%;
}
#tileTransitionProperties tr > td:first-child {
  width: 50px;
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
  border-bottom: red 5px solid;
}
#tileTransitionProperties tr > td:nth-child(3) {
  width: 50px;
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
  border-bottom: blue 5px solid;
}
#tileTransitionProperties tr > td:nth-child(5) {
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
  width: 50px;
}
#listCurrentTiles {
  position: absolute;
  left: 252px;
  top: 50px;
  bottom: 30px;
  right: 30px;
  border: solid 1px #c0c0c0;
  overflow-y: scroll;
  border-radius: 4px;
}
#listCurrentTiles div {
  display: inline-block;
}
#tilesCommands {
  position: absolute;
  left: 252px;
  bottom: 3px;
  right: 2px;
  text-align: center;
}
#listPossiblePathTiles {
  position: absolute;
  left: 0px;
  right: 30px;
  top: 150px;
  bottom: 30px;
  border: solid 1px #c0c0c0;
  overflow-y: scroll;
  border-radius: 4px;
}
#listPossiblePathTiles div {
  cursor: pointer;
  display: inline-block;
  margin: 2px;
}
#listChatBot {
  position: absolute;
  left: 5px;
  width: 150px;
  top: 35px;
  height: calc(50% - 30px);
}
#chatBotCommands {
  position: absolute;
  left: 5px;
  top: calc(50% + 5px);
}
#listBotSentences {
  position: absolute;
  left: 5px;
  width: 150px;
  top: calc(50% + 30px);
  bottom: 30px;
}
#chatBotDetails {
  position: absolute;
  top: 35px;
  left: 160px;
  right: 30px;
  bottom: 30px;
}
#chatBotDetails table {
  width: 100%;
}
#chatBotDetails table tr {
  vertical-align: top;
}
#chatBotDetails table tr > td:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
}
#chatBotDetails input,
#chatBotDetails select {
  width: 100%;
}
#chatbot_codecontainer {
  position: absolute;
  height: 200px;
  width: 500px;
  box-sizing: border-box;
}
#fileList {
  position: absolute;
  left: 5px;
  right: 35px;
  bottom: 5px;
  top: 85px;
  overflow-y: scroll;
  border: solid 1px #c0c0c0;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
}
#fileList table {
  width: 100%;
  border-collapse: collapse;
}
#fileList thead tr {
  background-color: #000000;
  color: white;
  font-weight: bold;
}
#fileList tbody > tr:nth-child(2n+1) {
  background-color: #E0E0E0;
}
#fileUsage {
  position: absolute;
  left: 5px;
  right: 35px;
  top: 35px;
  height: 45px;
  border: solid 1px #c0c0c0;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}
#gameInfo {
  position: absolute;
  top: 35px;
  left: 0px;
  right: 30px;
  bottom: 0px;
  overflow-y: scroll;
}
#gameInfo table {
  width: 100%;
}
#gameInfo table tr {
  vertical-align: top;
}
#gameInfo table tr > td:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
}
#gameInfo table input,
#gameInfo table textarea,
#gameInfo table select {
  width: 100%;
  resize: none;
}
#gameInfo table td > table > tbody > tr > td:nth-child(odd) {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
}
#searchGameTable {
  width: 100%;
}
#searchGameTable td:first-child {
  font-weight: bold;
  white-space: nowrap;
  width: 1px;
}
#searchGameTable input {
  width: 100%;
}
#gameList {
  position: absolute;
  top: 35px;
  left: 0px;
  right: 0px;
  bottom: 40px;
  overflow-y: scroll;
  border: solid 1px black;
}
#gameList table {
  width: 100%;
  border-collapse: collapse;
}
#gameList table thead tr {
  background-color: #444444;
  color: #FFFFFF;
  font-weight: bold;
}
#gameList table tr {
  vertical-align: top;
}
#gameList table tbody > tr:nth-child(2n+1) {
  background-color: #E0E0E0;
}
#gameList table tr > td:first-child {
  width: 1%;
}
#gameList table td {
  padding-right: 10px;
}
#gameList table tr > td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
  padding-top: 6px;
}
#gameList table tr > td:nth-child(3) {
  padding-top: 6px;
}
#createYourOwnGameButton {
  font-size: 20px;
}
#gameListCommands {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  text-align: center;
}
#showCreateGame {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: scroll;
  display: none;
  background: #FFFFFF;
}
#statOverview {
  position: absolute;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  right: 5px;
  width: 300px;
  bottom: 5px;
  top: 65px;
  overflow-y: auto;
}
#statOverview table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
#statOverview table tr > td:first-child {
  font-weight: bold;
  width: 1%;
}
#statOverview table tr > td:nth-child(2) {
  font-weight: bold;
  width: 1%;
}
#statOverview table tr:nth-child(odd) {
  background-color: #E0E0E0;
}
.weekendDays {
  background-color: #FFA0A0 !important;
}
#statType {
  position: absolute;
  top: 35px;
  left: 5px;
  right: 5px;
  width: calc(100% - 10px);
}
#graphContainer {
  position: absolute;
  left: 5px;
  right: 310px;
  bottom: 5px;
  top: 65px;
}
#graphContainer canvas {
  width: 100%;
  height: 100%;
}
#gameResetOptions {
  margin-top: 35px;
  width: calc(100% - 10px);
}
#gameResetOptions tr > td:nth-child(2) {
  width: 1%;
}
#gameResetOptions .button {
  white-space: nowrap;
  width: 100%;
}
#resetActions {
  margin-top: 35px;
  padding: 5px;
  text-align: center;
}
#resetActions > div {
  border: solid 1px #c0c0c0;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  padding: 5px;
  width: 200px;
  display: inline-block;
  border-radius: 4px;
  min-height: 80px;
  vertical-align: top;
  margin: 3px;
}
#resetActions .button {
  width: 100%;
}
#resetActions select {
  width: 100%;
}
#resetActions div span {
  margin-top: 5px;
  display: block;
  text-align: justify;
}
#codeNameProperty {
  position: absolute;
  left: 210px;
  right: 30px;
  top: 35px;
}
#codeNameProperty table {
  width: 100%;
}
#codeNameProperty table tr > td:first-child {
  font-weight: bold;
  white-space: nowrap;
  width: 1px;
}
#codeNameProperty input {
  width: 100%;
}
#genericCodeContainer {
  position: absolute;
  left: 210px;
  right: 30px;
  top: 90px;
  bottom: 30px;
  box-sizing: border-box;
  resize: none;
}
#genericCodeParameters {
  position: absolute;
  left: 210px;
  right: 30px;
  top: 90px;
  bottom: 30px;
  box-sizing: border-box;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
  overflow-y: scroll;
  display: none;
}
#genericCodeParameters table {
  width: 100%;
}
#genericCodeParameters input {
  width: 100%;
}
#genericCodeParameters select {
  width: 100%;
}
#genericCodeParameters table tr > td:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
}
#genericCodeParameters .dialogBlockDelete {
  float: none;
  display: inline-block;
  margin-right: 5px;
}
#genericCodeParameters table:nth-child(2) tr > td:nth-child(4) {
  width: 1%;
}
#genericCodeDescription {
  position: absolute;
  left: 210px;
  right: 30px;
  top: 90px;
  bottom: 30px;
  display: none;
  overflow-y: auto;
}
#genericCodeDescription table {
  width: 100%;
}
#genericCodeDescription tr > td:first-child {
  width: 1%;
  font-weight: bold;
  white-space: nowrap;
}
#genericCodeDescription textarea {
  width: 100%;
  height: calc(100vh - 250px);
  resize: none;
}
#genericCodeDescription select {
  width: 100%;
}
#genericCodeIncludes {
  position: absolute;
  left: 210px;
  right: 30px;
  top: 90px;
  bottom: 30px;
  display: none;
}
#titleAvailableIncludes {
  font-weight: bold;
  position: absolute;
  top: 0px;
  left: 5px;
}
#titleIncluded {
  font-weight: bold;
  position: absolute;
  top: 0px;
  left: calc(50% + 5px);
}
#listAvailableIncludes {
  position: absolute;
  left: 0px;
  top: 20px;
  bottom: 0px;
  width: calc(50% - 5px);
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  border: solid 1px #c0c0c0;
  overflow-y: scroll;
  padding: 3px;
  box-sizing: border-box;
  /*& div:hover
    {
        background-color: @rowHover;
    }*/
}
#listAvailableIncludes span {
  display: block;
  margin-top: 5px;
  font-weight: bold;
}
#listAvailableIncludes div {
  padding: 3px;
  cursor: pointer;
}
#listIncluded {
  position: absolute;
  right: 0px;
  top: 20px;
  bottom: 0px;
  width: calc(50% - 5px);
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  border: solid 1px #c0c0c0;
  overflow-y: scroll;
  padding: 3px;
  box-sizing: border-box;
  /*& div:hover
    {
        background-color: @rowHover;
    }*/
}
#listIncluded span {
  display: block;
  margin-top: 5px;
  font-weight: bold;
}
#listIncluded div {
  padding: 3px;
  cursor: pointer;
}
#genericCodeIncludeIncludesButton {
  position: absolute;
  left: calc(50% - 10px);
  top: 50%;
}
#genericCodeRemoveIncludesButton {
  position: absolute;
  left: calc(50% - 10px);
  top: calc(50% + 30px);
}
#houseDetails {
  position: absolute;
  top: 35px;
  left: 0px;
  right: 5px;
  width: calc(100% - 157px);
}
#houseDetails tr > td:first-child,
#houseDetails tr > td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
}
#houseDetails input {
  width: 100%;
}
#listHouses {
  position: absolute;
  top: 35px;
  left: 0px;
  width: 150px;
  height: calc(50% - 60px);
}
#houseActions {
  position: absolute;
  top: calc(50% - 25px);
  left: 0px;
}
#houseParts {
  position: absolute;
  bottom: 25px;
  left: 0px;
  width: 150px;
  height: calc(50% - 25px);
}
#housePartCommands {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 150px;
  text-align: center;
}
#houseDetailsContainer {
  position: absolute;
  left: 152px;
  right: 0px;
  top: 35px;
  bottom: 0px;
}
#houseEditorContainer {
  position: absolute;
  left: 0px;
  right: 30px;
  top: calc(135px);
  bottom: 25px;
  overflow: scroll;
  border: solid 1px #c0c0c0;
}
#houseEditorMouseOverlay {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: transparent;
  display: none;
  cursor: default;
}
#houseEditorCommands {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  text-align: center;
}
#listHouseParts {
  position: absolute;
  left: 0px;
  top: 35px;
  bottom: 25px;
  width: 150px;
}
#housePartContainer {
  position: absolute;
  left: 152px;
  right: 0px;
  top: 35px;
  bottom: 0px;
}
#housePartEditorContainer {
  position: absolute;
  left: 0px;
  right: 30px;
  bottom: 25px;
  top: calc(132px);
  border: solid 1px #c0c0c0;
  overflow: scroll;
}
#uploadHousePart {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 35px;
  display: none;
  background-color: #FFFFFF;
}
#artHousePartIframe {
  display: none;
}
#uploadImportData {
  position: absolute;
  left: 0px;
  top: 35px;
  right: 0px;
  bottom: 0px;
  background-color: #FFFFFF;
  display: none;
}
#importExportFrame {
  display: none;
}
#listSlots {
  position: absolute;
  left: 5px;
  width: 150px;
  top: 35px;
  bottom: 30px;
}
#slotDetails {
  position: absolute;
  left: 160px;
  right: 30px;
  top: 35px;
  bottom: 30px;
  border: solid 1px #c0c0c0;
  overflow-y: scroll;
  border-radius: 4px;
}
#slotDetails table {
  width: 100%;
}
#slotDetails table tr > td:first-child {
  width: 1%;
  font-weight: bold;
  white-space: nowrap;
}
#slotDetails input,
#slotDetails select {
  width: 100%;
}
#mapEditorContainer {
  position: absolute;
  left: 210px;
  right: 0px;
  top: calc(65px);
  bottom: 0px;
}
.mapWithSubPanel {
  bottom: 50% !important;
}
.mapWithSmallSubPanel {
  bottom: 38px !important;
}
.mapSmallSubPanel {
  top: auto !important;
  height: 30px;
}
.mapSmallSubPanel table {
  width: 100%;
}
.mapSmallSubPanel table tr > td:first-child {
  width: 1px;
  font-weight: bold;
  white-space: nowrap;
}
.mapSmallSubPanel table input {
  width: 100%;
}
#mapEditorActions {
  position: absolute;
  border: solid 1px #c0c0c0;
  top: 50%;
  left: 210px;
  right: 0px;
  bottom: 0px;
  display: none;
  padding: 3px;
  overflow-y: scroll;
}
#mapEditorActions select {
  width: 100%;
}
#mapEditorContainer > canvas {
  cursor: crosshair;
  width: 100%;
  height: 100%;
}
#mapEditorPalette {
  background-color: #FFFFFF;
  position: absolute;
  left: 0px;
  top: 35px;
  padding-top: 2px;
  bottom: 0px;
  width: 210px;
  box-sizing: border-box;
  border-right: solid 2px #c0c0c0;
}
#mapEditorPalette > span {
  width: calc(100% - 4px);
  margin: 2px;
  padding: 2px;
  display: block;
  box-sizing: border-box;
  border: solid 1px #808080;
  cursor: pointer;
}
#mapEditorPalette select {
  width: 100%;
}
.toolSelected {
  background-color: #b5e5ea;
}
#tilePreview {
  margin: 2px;
  padding: 2px;
  display: block;
  position: absolute;
  left: 0px;
  bottom: 0px;
  top: 282px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: solid 1px #808080;
  box-sizing: border-box;
  width: 204px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
}
#tilePreview > span {
  display: block;
  cursor: pointer;
  padding: 3px;
}
#mapEditorSelectTile {
  position: absolute;
  left: 210px;
  right: 0px;
  top: 28px;
  bottom: 0px;
  background-color: #FFFFFF;
  display: none;
}
#tileList {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 15px;
  padding: 3px;
  overflow-y: scroll;
}
#tileList div,
#tilePreview div {
  margin: 0px;
  cursor: pointer;
  display: inline-block;
  border: solid 2px transparent;
  line-height: 0px;
}
#tileList div.toolSelected,
#tilePreview div.toolSelected {
  border: solid 2px red !important;
}
#tileList table,
#tilePreview table {
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
}
#tileList tr,
#tilePreview tr {
  cursor: pointer;
}
#tileList tr:hover,
#tilePreview tr:hover {
  background-color: #ffd7d7;
}
#tileList tr > td:first-child,
#tilePreview tr > td:first-child {
  width: 1px;
}
#currentPosition {
  /*position: absolute;
    top: 272px;
    left: 2px;
    width: 202px;
        */
  height: 24px;
  border: solid 1px #808080;
  overflow: hidden;
  background-color: #FFFFFF;
  padding: 5px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  box-sizing: border-box;
  position: absolute;
  right: 5px;
  top: 3px;
  width: 200px;
}
.smallSearch:after {
  content: "\f002";
  font: normal normal normal 14px/1 FontAwesome;
}
.smallSearch:hover {
  color: #b00000;
}
#mapEditorToolbar {
  position: absolute;
  top: calc(33px);
  left: 210px;
  right: 0px;
  height: 30px;
  padding-left: 10px;
  background-color: #343434;
}
#mapEditorToolbar span {
  height: 20px;
  width: 70px;
  background-color: #E0E0E0;
  display: inline-block;
  line-height: 20px;
  margin-top: 5px;
  padding-left: 3px;
  padding-right: 3px;
  border: solid 1px #808080;
  cursor: pointer;
  border-radius: 2px;
  margin-right: 5px;
  text-align: center;
  font-weight: bold;
}
#mapEditorToolbar span:hover {
  background-color: antiquewhite;
}
#mapEditorAdditionalTools {
  display: inline-block;
  color: white;
}
#mapEditorAdditionalTools span {
  color: black;
}
#mapEditorAdditionalTools input {
  width: 32px;
}
.activeToolbarIcon {
  background-color: aquamarine !important;
}
#mapEditorSave:before {
  content: "\f0c7";
  font: normal normal normal 14px/1 FontAwesome;
  margin-right: 5px;
  font-weight: normal;
}
#mapEditorGrid:before {
  content: "\f00a";
  font: normal normal normal 14px/1 FontAwesome;
  margin-right: 5px;
  font-weight: normal;
}
#mapEditorMinimap:before {
  content: "\f0ac";
  font: normal normal normal 14px/1 FontAwesome;
  margin-right: 5px;
  font-weight: normal;
}
#monsterParameters {
  bottom: calc(50% + 7px);
}
#monsterParameters table {
  border-collapse: collapse;
  width: 100%;
}
#monsterParameters table > thead > tr {
  background-color: #444444;
}
#monsterParameters table > thead > tr > td {
  color: #FFFFFF;
  font-weight: bold;
}
#monsterParamCommands {
  position: absolute;
  top: calc(50% - 7px);
  left: 155px;
  right: 30px;
  text-align: center;
}
#searchModulesTable {
  position: absolute;
  top: 35px;
  left: 5px;
  right: 35px;
  width: calc(100% - 40px);
}
#searchModulesTable td:first-child {
  font-weight: bold;
  white-space: nowrap;
  width: 1px;
}
#searchModulesTable input {
  width: 100%;
}
#modulesList {
  position: absolute;
  top: calc(70px);
  left: 5px;
  right: 35px;
  bottom: 40px;
  overflow-y: scroll;
  border: solid 1px black;
}
#modulesList table {
  width: 100%;
  border-collapse: collapse;
}
#modulesList table thead tr {
  background-color: #444444;
  color: #FFFFFF;
  font-weight: bold;
}
#modulesList table tr {
  vertical-align: top;
}
#modulesList table tbody > tr:nth-child(2n+1) {
  background-color: #E0E0E0;
}
#modulesList table tr > td:first-child {
  width: 1%;
}
#modulesList table td {
  padding-right: 10px;
}
#createYourOwnModuleButton {
  font-size: 20px;
}
#modulesListCommands {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  text-align: center;
}
#showCreateModule {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: scroll;
  display: none;
  background: #FFFFFF;
}
#listNPC {
  position: absolute;
  left: 5px;
  width: 150px;
  top: 35px;
  bottom: 30px;
}
#npcDetails {
  position: absolute;
  left: 0px;
  right: 244px;
  top: 0px;
}
#npcDetails table {
  width: 100%;
}
#npcDetails table tr > td:first-child {
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
  width: 1%;
}
#npcDetails input,
#npcDetails select {
  width: 100%;
  outline: none;
  border: solid 1px #c0c0c0;
}
#actionsAndConditions {
  position: absolute;
  left: 0px;
  width: calc(100% - 248px);
  top: calc(50% + 5px);
  height: calc(50% - 37px);
  border: solid 1px #c0c0c0;
  padding: 5px;
  box-sizing: border-box;
  overflow-y: scroll;
  display: none;
}
#actionsAndConditions select {
  width: 100%;
}
#dialog {
  position: absolute;
  left: 0px;
  right: 200px;
  top: 65px;
  bottom: 0px;
  width: calc(100% - 248px);
  height: calc(100% - 95px);
  box-sizing: border-box;
  border: solid 1px #c0c0c0;
  resize: none;
  overflow-y: scroll;
  outline: none;
}
.dialogAnswer {
  height: calc(50% - 110px) !important;
}
#dialogJumpTo {
  position: absolute;
  left: 0px;
  width: calc(100% - 248px);
  top: calc(50% - 30px) !important;
  display: none;
}
#dialogJumpTo table {
  width: 100%;
}
#dialogJumpTo table tr > td:first-child {
  width: 1%;
  font-weight: bold;
  white-space: nowrap;
}
#dialogJumpTo select {
  width: 100%;
}
#listDialogs {
  position: absolute;
  right: 0px;
  width: 245px;
  border: solid 1px #c0c0c0;
  top: 15px;
  bottom: calc(50% + 70px);
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  overflow-y: scroll;
  overflow-x: hidden;
}
#listDialogs > div {
  white-space: nowrap;
  cursor: pointer;
}
#commandDialogs {
  position: absolute;
  top: calc(50% - 68px);
  right: 0px;
  width: 247px;
}
#answerTitle {
  position: absolute;
  right: 0px;
  width: 245px;
  top: calc(50% - 41px);
  font-weight: bold;
}
#listAnswers {
  position: absolute;
  right: 0px;
  width: 245px;
  border: solid 1px #c0c0c0;
  bottom: 30px;
  top: calc(50% - 23px);
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  overflow-y: scroll;
  overflow-x: hidden;
}
#listAnswers > div {
  white-space: nowrap;
  cursor: pointer;
}
#commandAnswers {
  position: absolute;
  right: 0px;
  width: 245px;
  bottom: 5px;
}
#mainCommands {
  position: absolute;
  left: 3px;
  bottom: 5px;
}
.dialogParamLabel {
  display: inline-block;
  width: calc(40% - 20px);
  font-weight: bold;
}
.dialogParam {
  display: inline-block;
  width: 60%;
}
.dialogParam input,
.dialogParam select {
  width: 100%;
}
.dialogBlock {
  border: solid 1px #c0c0c0;
  margin: 2px;
  padding: 3px;
  width: calc(100% - 6px);
  box-sizing: border-box;
  display: block;
}
.dialogBlockDelete {
  float: right;
  background-color: #E00000;
  color: white;
  width: 15px;
  height: 15px;
  border-radius: 7px;
  padding-left: 3px;
  box-sizing: border-box;
  padding-top: 1px;
  font-weight: bold;
  cursor: pointer;
}
#npcDialogSection,
#npcShopSection {
  position: absolute;
  top: 35px;
  left: 160px;
  right: 30px;
  bottom: 30px;
}
#dialogTitle {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 245px;
  font-weight: bold;
}
#npcShowShop,
#npcShowDialog {
  position: absolute;
  bottom: 5px;
  left: 150px;
}
#npcShopList {
  border: solid 1px #c0c0c0;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 60px;
  overflow-y: scroll;
  border-radius: 4px;
}
#npcShopList table {
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
}
#npcShopList table thead tr {
  background-color: #444444;
}
#npcShopList table thead td {
  font-weight: bold;
  color: #FFFFFF;
}
#npcShopList input {
  width: 100%;
}
#npcAddShopItem {
  position: absolute;
  left: 0px;
  bottom: 30px;
  width: 100%;
}
#listObject {
  position: absolute;
  left: 5px;
  width: 150px;
  top: 35px;
  bottom: 30px;
}
#objectDetails {
  position: absolute;
  left: 160px;
  right: 30px;
  top: 35px;
  bottom: 30px;
  border: solid 1px #c0c0c0;
  overflow-y: scroll;
  border-radius: 4px;
}
#objectDetails table {
  width: 100%;
}
#objectDetails table tr {
  vertical-align: top;
}
#objectDetails table tr > td:nth-child(1) {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
}
#objectDetails table tr > td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
}
#objectDetails input,
#objectDetails select,
#objectDetails textarea {
  width: 100%;
  resize: none;
}
#obj_codecontainer {
  position: absolute;
  height: 200px;
  border: solid 1px #c0c0c0;
  width: 500px;
  box-sizing: border-box;
  border-radius: 4px;
}
#listObjectType {
  position: absolute;
  left: 5px;
  width: 150px;
  top: 35px;
  bottom: 30px;
}
#objectTypeDetails {
  position: absolute;
  left: 160px;
  right: 5px;
  top: 35px;
  bottom: 30px;
  border: solid 1px #c0c0c0;
  overflow-y: scroll;
  border-radius: 4px;
}
#objectTypeDetails table {
  width: 100%;
}
#objectTypeDetails table tr {
  vertical-align: top;
}
#objectTypeDetails table tr > td:nth-child(1) {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
}
#objectTypeDetails table tr > td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
}
#objectTypeDetails input,
#objectTypeDetails select,
#objectTypeDetails textarea {
  width: 100%;
  resize: none;
}
#pixelEditorPalette {
  position: absolute;
  border: solid 1px #c0c0c0;
  top: 35px;
  left: 5px;
  bottom: 270px;
  padding: 3px;
  width: 200px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-y: scroll;
}
#pixelEditorPalette table {
  width: 100%;
}
#pixelEditorPalette tr > td:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
}
#pixelEditorPalette > span.button {
  width: calc(100% - 5px);
  box-sizing: border-box;
}
#pixelEditorColorPicker {
  position: absolute;
  border: solid 1px #c0c0c0;
  left: 5px;
  bottom: 5px;
  padding: 3px;
  width: 200px;
  height: 260px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
}
#pixelEditorHueSelection {
  position: absolute;
  border: solid 1px black;
  bottom: 5px;
  right: 5px;
  height: 185px;
  width: 20px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #FF0000 0%, #FF00FF 17%, #0000FF 33%, #00FFFF 50%, #00FF00 66%, #FFFF00 84%, #FF0000 100%);
}
#pixelEditorColorSelection {
  position: absolute;
  border: solid 1px black;
  bottom: 5px;
  left: 5px;
  right: 30px;
  height: 185px;
  box-sizing: border-box;
  background: linear-gradient(to right, #FFFFFF 0%, #FF0000 100%);
}
#pixelEditorColorSelection2 {
  position: absolute;
  border: solid 1px black;
  bottom: 5px;
  left: 5px;
  right: 30px;
  height: 185px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
  overflow: hidden;
}
#pixelEditorCurrentColor {
  position: absolute;
  border: solid 2px black;
  border-radius: 10px;
  width: 12px;
  height: 12px;
  left: 154px;
  top: -5px;
  box-sizing: border-box;
}
#pixelEditorCurrentHue {
  position: absolute;
  border: solid 2px black;
  top: 64px;
  right: 2px;
  box-sizing: border-box;
  width: 26px;
  height: 10px;
}
#pixelEditorColorMouseSelector {
  position: absolute;
  left: 0px;
  bottom: 0px;
  background-color: transparent;
  width: 200px;
  height: 195px;
}
#pixelEditorFieldCurrentColor {
  width: 107px;
}
#pixelEditorColorPreview {
  width: 35px;
  height: 25px;
  border: solid 1px black;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 5px;
}
#pixelEditorCanvasContainer {
  position: absolute;
  left: 210px;
  right: 178px;
  top: 35px;
  bottom: 118px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  border: solid 1px #c0c0c0;
  box-sizing: border-box;
  overflow: scroll;
}
#pixelEditorCanvas {
  cursor: crosshair;
  border: solid 1px black;
}
#pixelEditorLayers {
  position: absolute;
  right: 35px;
  width: 139px;
  top: 35px;
  bottom: 118px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  border: solid 1px #c0c0c0;
  box-sizing: border-box;
  overflow-y: scroll;
}
#pixelEditorLayers > div {
  margin: 5px;
  padding: 3px;
  background-color: #F0F0F0;
  border: solid 1px #E0E0E0;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#pixelEditorLayers > div > canvas {
  border: solid 1px black;
}
#pixelEditorLayers > div > span > .button {
  font-size: 10px;
  float: right;
  vertical-align: top;
  margin-top: -1px;
}
.selectedPixelEditorLayer {
  background-color: #FFE0E0 !important;
}
#pixelEditorLayerActions {
  position: absolute;
  right: 35px;
  bottom: 57px;
  text-align: center;
  width: 137px;
}
#pixelEditorLayerActions div.button {
  font-size: 10px;
  margin: 1px;
}
#pixelEditorSpriteList {
  position: absolute;
  left: 210px;
  right: 178px;
  bottom: 5px;
  height: 108px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  border: solid 1px #c0c0c0;
  box-sizing: border-box;
  overflow-x: scroll;
  white-space: nowrap;
}
#pixelEditorSpriteList > div {
  margin: 5px;
  padding: 3px;
  background-color: #F0F0F0;
  border: solid 1px #E0E0E0;
  display: inline-block;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#pixelEditorSpriteList > div > canvas {
  border: solid 1px black;
}
#pixelEditorPreview {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 32px;
  background-color: #FFFFFF;
  overflow: scroll;
  display: none;
}
#pixelEditorPreview img {
  margin: 10px;
  border: solid 1px black;
}
.pixelEditorNewSprite {
  width: 64px;
  height: 69px;
  vertical-align: top;
  color: #A0A0A0;
  font-weight: bold;
  font-size: 64px;
  text-align: center;
}
.pixelEditorNewSprite:hover {
  color: #808080;
}
#pixelEditorPreviewClose {
  position: absolute;
  right: 5px;
  top: 0px;
}
#colorShades {
  margin-top: 5px;
  width: 100%;
}
#colorShades td {
  border: solid 2px black;
  box-sizing: border-box;
}
.selectedShade {
  border: solid 2px red !important;
}
#addImageFromFile {
  position: absolute;
  background-color: white;
  top: 35px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: none;
}
#gameMapContainer {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 32px;
  bottom: 0px;
}
#gameMapContainer > canvas {
  cursor: pointer;
  width: 100%;
  height: 100%;
}
#npcDialog {
  position: absolute;
  height: 100%;
  width: 100%;
  display: none;
  z-index: 10000;
}
#npcDialog table {
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
}
#npcDialog table thead td {
  font-weight: bold;
}
#dialogSentence {
  overflow-y: scroll;
  padding: 3px;
  box-sizing: border-box;
  height: 100%;
  width: 70%;
  float: left;
}
#dialogAnswers {
  bottom: 0px;
  padding: 3px;
  box-sizing: border-box;
  float: right;
  width: 30%;
  overflow-y: auto;
  height: 100%;
}
#dialogAnswers div {
  margin: 2px;
  padding: 1px;
  box-sizing: border-box;
  width: calc(100% - 6px);
}
#mapMessage {
  position: absolute;
  left: calc(50% - 200px);
  width: 400px;
  top: 60%;
  box-sizing: border-box;
  display: none;
}
#mapMessage .gamePanelContentNoHeader {
  font-size: 18px;
}
.mapMessageVisible {
  opacity: 1;
  animation-name: mapMessageIn;
  animation-duration: 0.5s;
}
.mapMessageHidden {
  opacity: 0;
  animation-name: mapMessageOut;
  animation-duration: 0.5s;
}
#mapLoadingPage {
  display: none;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 100000;
}
#mapLoadingPage div {
  text-align: center;
  font-size: 40px;
  margin-top: calc(50vh - 20px);
}
#cheatDetected {
  position: absolute;
  background-color: red;
  color: #ffd800;
  font-size: 20px;
  top: 35px;
  right: 30px;
  padding: 5px;
  display: none;
}
#sounds {
  display: none;
}
@media (min-width: 500px) {
  #npcDialog {
    height: 300px;
    width: 500px;
    left: calc(50% - 250px);
    top: calc(50% - 150px);
  }
}
@keyframes mapMessageIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mapMessageOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#releaseGameMessage {
  position: absolute;
  right: 10px;
  top: 70px;
  width: 300px;
  padding: 5px;
  border: solid 2px black;
  background-color: rgba(255, 180, 0, 0.5);
  font-size: 18px;
}
#particleDetails {
  position: absolute;
  left: 160px;
  right: 30px;
  top: 35px;
  bottom: 50%;
  border: solid 1px #c0c0c0;
  overflow-y: scroll;
  border-radius: 4px;
}
#particleDetails table {
  width: 100%;
}
#particleDetails table tr {
  vertical-align: top;
}
#particleDetails table tr > td:nth-child(1) {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
}
#particleDetails table tr > td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
}
#particleDetails input,
#particleDetails select,
#particleDetails textarea {
  width: 100%;
  resize: none;
}
#particlePreviewContainer {
  position: absolute;
  left: 160px;
  right: 30px;
  top: calc(50% + 5px);
  bottom: 30px;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
}
#questDetails {
  position: absolute;
  top: 35px;
  left: 155px;
  right: 35px;
  height: 200px;
  border: solid 1px #c0c0c0;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
}
#questDetails table {
  width: 100%;
}
#questDetails table tr {
  vertical-align: top;
}
#questDetails table tr > td:first-child {
  width: 1px;
  font-weight: bold;
  white-space: nowrap;
}
#questDetails input {
  width: 100%;
}
#questDetails textarea {
  width: 100%;
  resize: none;
}
#questJournalEntries {
  position: absolute;
  top: 240px;
  left: 155px;
  right: 35px;
  bottom: 30px;
  border: solid 1px #c0c0c0;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  overflow-y: scroll;
}
#questJournalEntries textarea {
  width: 100%;
  resize: none;
}
#questJournalCommands {
  position: absolute;
  left: 155px;
  right: 35px;
  bottom: 0px;
  text-align: center;
}
#effectParameters {
  bottom: 30px;
}
#tilesContainer {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 25px;
  bottom: 0px;
  overflow: scroll;
}
.elementCodeWarning {
  position: absolute;
  left: 152px;
  right: 0px;
  width: calc(100% - 152px);
  top: calc(50% + 24px);
  font-weight: bold;
  background-color: #ffd800;
  text-align: center;
  display: none;
}
.elementCode {
  position: absolute;
  left: 152px;
  right: 30px;
  top: calc(50% + 40px);
  bottom: 30px;
  box-sizing: border-box;
  resize: none;
}
.elementParameters {
  position: absolute;
  left: 152px;
  right: 30px;
  top: 35px;
  bottom: calc(50% - 22px);
  overflow-y: scroll;
  border: solid 1px #c0c0c0;
  border-radius: 4px;
}
.elementParameters table {
  width: 100%;
}
.elementParameters table tr > td:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
  padding-right: 30px;
}
.elementParameters table tr {
  vertical-align: top;
}
.elementParameters input,
.elementParameters select {
  width: 100%;
}
.elementParameters .dialogBlockDelete {
  margin-right: -30px;
}
.elementList {
  position: absolute;
  left: 0px;
  top: 35px;
  width: 150px;
  bottom: 30px;
}
.elementListCommands {
  position: absolute;
  left: 0px;
  width: 150px;
  bottom: 0px;
  text-align: center;
}
.elementCommands {
  position: absolute;
  left: 150px;
  right: 0px;
  bottom: 0px;
  text-align: center;
}
#skillParameters {
  bottom: calc(50% + 7px);
}
#skillParameters table {
  border-collapse: collapse;
  width: 100%;
}
#skillParameters table > thead > tr {
  background-color: #444444;
}
#skillParameters table > thead > tr > td {
  color: #FFFFFF;
  font-weight: bold;
}
#skillParamCommands {
  position: absolute;
  top: calc(50% - 7px);
  left: 155px;
  right: 30px;
  text-align: center;
}
#tableList {
  position: absolute;
  top: 35px;
  left: 5px;
  right: 50px;
  bottom: 5px;
  overflow-y: auto;
}
#tableList table {
  width: 100%;
  border: solid 1px black;
  border-collapse: collapse;
}
#tableList thead tr {
  background-color: #000000;
  color: white;
  font-weight: bold;
}
#tableList tbody > tr:nth-child(2n+1) {
  background-color: #E0E0E0;
}
#tableList a.listItem {
  font-weight: bold;
  cursor: pointer;
  padding: 3px;
  text-decoration: none;
  color: black;
  display: block;
}
#tableList a:hover {
  background-color: #ffd7d7;
}
#zoneParameters {
  position: absolute;
  left: 152px;
  right: 30px;
  top: 35px;
  bottom: calc(50% - 20px);
  overflow-y: scroll;
  border-radius: 4px;
  box-shadow: inset 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
  border: 1px solid #c0c0c0;
}
#zoneParameters table {
  width: 100%;
}
#zoneParameters tr > td:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: bold;
  color: #606060;
}
#zoneParameters input,
#zoneParameters select {
  width: 100%;
}
#zonePreviewTitle {
  position: absolute;
  left: 152px;
  right: 30px;
  top: calc(50% + 27px);
}
#zonePreview {
  position: absolute;
  left: 152px;
  right: 30px;
  top: calc(50% + 45px);
  bottom: 30px;
}
#zonePreview canvas {
  width: 100%;
  height: 100%;
}
